<template>
  <view>
    <uni-nav-bar title="车友团专享价格表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view class="swiper-top" :style="{ height:height+'px' }">
      <view class="top1">
        <view class="titles">
          <image :src="team.img" mode=""></image>
          <text>{{team.name}}</text>
        </view>
		<view class="loct">
			<view class="left_loct" @click="positionList.length > 0?priceArea():''">
			  <text>{{positionText.name}}</text>
			  <image src="../../static/team/dq.png" mode="" v-if="positionList.length > 0"></image>
			</view>
			<view
			  v-if="positionList.length > 0 && show"
			  class="ul_item"
			  :style="{ transform: show ? 'translateY(-60px)' : 'translateY(-20px)', zIndex: show ? '1' : '-1' }"
			>
			  <view class="li_item" v-for="(item, index) in positionList" :key="index" @click="changeLoct(item)">{{ item.name }}</view>
			</view>
		</view>
      </view>
      <view class="top2">环保分{{team.num}}</view>
     <!-- <view class="top3">
        <view class="list">
          <view class="Lines" v-for="(item, index) in 3" :key="index">
            <view>V{{ index + 1 }}</view>
            <view>
              <text></text>
              <text></text>
            </view>
          </view>
        </view>
        <view class="Line"></view>
      </view> -->
      <view class="top4">
        <swiper class="ad-img-swiper" 
		 circular
		 :interval="3000" 
		 :duration="1000" 
		 @change="change" 
		 :current="current" 
		 previous-margin="20px"
	     next-margin="20px">
          <swiper-item v-for="(item, index) in dataTeam" :key="index">
            <image class="ad-img-swiper" :src="item.level_image.bg"></image>
            <view class="swiper_item">
              <view class="swiper_left">
                <image :src="item.level_image.level" mode="" class="left_img"></image>
                <view class="num_left">
                  <image :src="item.level_image.dizuo" mode=""></image>
				  <view>
					  <text>{{item.score}}</text>
					  <text>环保分</text>
				  </view>
                </view>
              </view>
              <view class="swiper_right" v-if="item.cha==0">{{item.cha==0?'已达成':`还差${item.cha}环保分`}}</view>
			   <view class="swiper_right" v-else><text>还差</text><text>{{item.cha}}</text><text>环保分</text></view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="vipPrice">
        <view class="vipPrice_title">专享价</view>
        <view class="vipPrice_list">
          <view class="vipPrice_item">
            <view class="">钱包支付</view>
            <view class="">
              <text style="font-size: 72rpx;">{{Score.money}}</text>
              <text>元/公斤</text>
            </view>
          </view>
          <view class="vipPrice_item">
            <view class="" >微信支付</view>
            <view class="" style="margin-top: 20rpx;">
              <text style="font-size: 60rpx;font-weight: 400;">{{Score.wechat}}</text>
              <text>元/公斤</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="swiper-bot" :style="{ height: pageHeight + 'px' }">
		<!-- <view>{{Signage.title}}</view> -->
		<view v-html="Signage.content"></view>
	</view>
	 <Lotlats @position="position"></Lotlats>
  </view>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';
import { toPublish } from '@mqtt';
import { navBack } from '@/utils/navigator';
import Lotlats from '@c/team/Lotlat.vue';
import { isH5 } from '@/utils/platform';
import { onLoad } from '@dcloudio/uni-app';
import { showLoading} from '@/utils/prompt';
import { Hierarchical,GetCities,GetCitieList } from '@/gql/team';
import { authorMe } from '@/gql/user';
const positionText: Ref<any> = ref({});
const Signage: Ref<any> = ref({});
const Score: Ref<any> = ref({});
const positionList = ref([]);
const current=ref('0')

const dataTeam: Ref<any> = ref({});
const show = ref(false);
const pageHeight = ref('');
const height=ref()
// isH5 ? 73 : 65

const list = [
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
];
const team: Ref<any> = ref({});
const level=ref('')
onLoad((pearm)=>{
	team.value=pearm
	level.value=pearm.leve
	height.value = isH5 ? 430 : 425;
	uni.getSystemInfo({
	  success: function(res) {
	    pageHeight.value = (res.windowHeight - height.value).toString();
	  },
	});
})
// 调整轮播页面
function change(e) {
  Score.value=dataTeam.value[e.detail.current]
}
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(lat, lot) {
  showLoading('正在加载');
  const payload = {
    query: GetCities,
    variables: {
      lon: lot,
      lat: lat,
    },
  };
  toPublish('ql/team/getCity', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    positionText.value = data.get_city;
	Hierar(positionText.value.code)
  });
}
/**
 * 获取加注机分布的城市列表
 */
CityList()
function CityList() {
  const payload = {
    query: GetCitieList,
  };
  toPublish('ql/team/getCityList', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    positionList.value = data.get_city_list;
  });
}
carexplain()
/**
 * 团队环保分的说明信息
 */
function carexplain() {
  const payload = {
    query: authorMe,
    variables: {
      code: 'hbf',
    },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    const { data } = obj;
	Signage.value=data.get_myblock
  });
}
/**
 * @param {Object} code 当前地址的code值
 * 获取当前位置的不能级别的环保值以及等级状况
 */
function Hierar(code){
	showLoading('正在加载');
	const payload = {
	  query: Hierarchical,
	  variables: {
	    team_id: Number(team.value.id),
	    code,
	  },
	};
	toPublish('ql/team/getLevelList', payload, (obj: any) => {
	  uni.hideLoading();
	  const { data } = obj;
	  dataTeam.value=data.get_level
	  data.get_level.map((item,index)=>{
	  if(level.value==item.level){
		  Score.value=data.get_level[index]
		  current.value=index
	  }
	  })
	});
}
function priceArea() {
	show.value = !show.value;
  // uni.navigateTo({
  //   url: '/pages/team/selectAddress',
  // });
}
/**
 * @param {Object} item 选中的当前位置的名称以及位置的code值
 */
function changeLoct(item){
	Hierar(item.code)
	positionText.value=item
	show.value=false
}
</script>

<style scoped lang="less">
@import url('../team/less/level.less');
</style>
